<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Supreme car wash</title>
        <meta name="description" content="" />

        <meta name="twitter:title" content="" />
        <meta name="twitter:description" content="" />

        <!-- Open Graph / Facebook -->
        <meta property="og:title" content="Title of the project" />
        <meta property="og:description" content="" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://github.com/PaulleDemon" />
        <!--Replace with the current website url-->
        <meta property="og:image" content="" />

        <link
            rel="shortcut icon"
            href="./assets/logo.png"
            type="image/x-icon"
        />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
        />

        <!-- <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css"> -->
        <link rel="stylesheet" href="./css/tailwind-build.css" />
        <link rel="stylesheet" href="./css/index.css" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
            integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
    </head>

    <body
        class="tw-flex tw-min-h-[100vh] tw-w-full tw-flex-col tw-bg-[#ffffff]"
    >
        <div
            class="tw-flex tw-h-[80px] tw-w-full tw-place-items-center tw-justify-around tw-bg-gray-200 tw-px-5 max-md:tw-hidden"
        >
            <p class="primary-text-color tw-text-3xl tw-font-semibold">
                Supreme car wash
            </p>

            <div class="tw-flex tw-gap-4">
                <div
                    class="tw-flex tw-h-[50px] tw-w-[50px] tw-place-content-center tw-place-items-center tw-rounded-full tw-bg-secondary tw-p-3 tw-text-white"
                >
                    <i class="bi bi-clock tw-text-3xl tw-font-bold"></i>
                </div>
                <div>
                    <p class="tw-text-xl tw-font-semibold tw-text-primary">
                        Opening hours
                    </p>
                    <p class="tw-text-gray-600">Mon-Fri, 8:00 - 9:00</p>
                </div>
            </div>

            <div class="tw-flex tw-gap-4">
                <div
                    class="tw-flex tw-h-[50px] tw-w-[50px] tw-place-content-center tw-place-items-center tw-rounded-full tw-bg-secondary tw-p-3 tw-text-white"
                >
                    <i class="bi bi-telephone tw-text-3xl tw-font-bold"></i>
                </div>
                <div>
                    <p class="tw-text-xl tw-font-semibold tw-text-primary">
                        Call us
                    </p>
                    <p class="tw-text-gray-600">+1 222-222-222</p>
                </div>
            </div>

            <div class="tw-flex tw-gap-4">
                <div
                    class="tw-flex tw-h-[50px] tw-w-[50px] tw-place-content-center tw-place-items-center tw-rounded-full tw-bg-secondary tw-p-3 tw-text-white"
                >
                    <i class="bi bi-envelope tw-text-3xl tw-font-bold"></i>
                </div>
                <div>
                    <p class="tw-text-xl tw-font-semibold tw-text-primary">
                        Email us
                    </p>
                    <p class="tw-text-gray-600">supreme@example.com</p>
                </div>
            </div>
        </div>

        <header
            class="tw-sticky tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-bg-white tw-px-[10%] tw-shadow-lg max-md:tw-mr-auto max-md:tw-bg-primary md:tw-justify-around"
        >
            <div class="tw-flex tw-w-fit">
                <div class="tw-w-[50px] tw-p-1">
                    <img
                        src="./assets/logo.png"
                        alt="supreme-car-wash logo"
                        class="tw-object-contain"
                    />
                </div>
            </div>
            <div
                class="collapsible-header animated-collapse"
                id="collapsed-items"
            >
                <div
                    class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base max-md:tw-mt-[30px] max-md:tw-flex-col max-md:tw-place-items-end max-md:tw-gap-5 md:tw-mx-auto md:tw-place-items-center"
                >
                    <a class="header-links" href=""> About us </a>
                    <a class="header-links" href=""> Services </a>
                    <a class="header-links" href=""> Price </a>
                    <a class="header-links" href=""> Contact us </a>
                </div>
                <div
                    class="primary-text-color tw-flex tw-place-items-center tw-gap-[20px] tw-text-xl max-md:tw-w-full max-md:tw-place-content-center max-md:!tw-text-white"
                >
                    <a
                        href="https://www.facebook.com/"
                        target="_blank"
                        rel="noreferrer noopener"
                        area-label="facebook"
                        class="tw-transition-colors tw-duration-[0.3s] hover:tw-text-blue-600"
                    >
                        <i class="bi bi-facebook"></i>
                    </a>
                    <a
                        href="https://www.instagram.com//"
                        target="_blank"
                        rel="noreferrer noopener"
                        area-label="instagram"
                        class="tw-transition-colors tw-duration-[0.3s] hover:tw-text-blue-600"
                    >
                        <i class="bi bi-instagram"></i>
                    </a>
                </div>
            </div>
            <button
                class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-2xl tw-text-white md:tw-hidden"
                onclick="toggleHeader()"
                aria-label="menu"
                id="collapse-btn"
            >
                <!-- <i class="bi bi-list"></i> -->
            </button>
        </header>

        <section
            class="tw-flex tw-h-[650px] tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden max-md:tw-h-[300px]"
        >
            <div
                class="slideshow-container tw-flex tw-h-full tw-w-full tw-flex-col"
            >
                <div
                    class="tw-relative tw-h-[650px] tw-w-full tw-overflow-clip max-md:tw-h-full"
                >
                    <div class="slides fade">
                        <div class="numbertext">1 / 3</div>
                        <img
                            src="./assets/images/slideshow/car-wash.jpg"
                            alt="Delux car wash"
                            class="tw-h-full tw-w-full tw-object-cover"
                        />
                        <div class="text">Supreme car wash</div>
                    </div>

                    <div class="slides fade">
                        <div class="numbertext">2 / 3</div>
                        <img
                            src="./assets/images/slideshow/interior.jpg"
                            alt="Car wash"
                            class="tw-h-full tw-w-full tw-object-cover"
                        />
                        <div class="text">Interior car wash</div>
                    </div>

                    <div class="slides fade">
                        <div class="numbertext">3 / 3</div>
                        <img
                            src="./assets/images/slideshow/sponge-car-wash.jpg"
                            alt="supreme car wash"
                            class="tw-h-full tw-w-full tw-object-cover"
                        />
                        <div class="text">Best car wash</div>
                    </div>

                    <!-- Next and previous buttons -->
                    <p class="prev">&#10094;</p>
                    <p class="next">&#10095;</p>
                </div>

                <!-- The dots/circles -->
                <div class="dots-container tw-z-10">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-min-h-[60vh] tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-bg-[#fff] tw-p-4 tw-px-[20%] max-md:tw-gap-[4%] max-md:tw-px-[5%]"
        >
            <h1
                class="primary-text-color tw-text-center tw-text-5xl tw-font-medium max-md:tw-text-4xl"
            >
                Supreme Car Wash, TX
            </h1>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[10%] max-md:tw-flex-col max-md:tw-place-items-center max-md:tw-gap-[4%]"
            >
                <div
                    class="tw-flex tw-h-[350px] tw-w-[400px] tw-overflow-hidden max-md:tw-mt-[5%] max-md:tw-h-[300px] max-md:tw-w-[300px]"
                >
                    <img
                        src="./assets/images/homepage/garage.jpg"
                        alt="engine"
                        class="tw-w-full tw-object-cover"
                    />
                </div>
                <div
                    class="tw-flex tw-h-full tw-flex-col tw-gap-[5%] max-md:tw-mt-2 max-md:tw-gap-[3%] max-md:tw-text-center"
                >
                    <h2
                        class="primary-text-color tw-text-5xl max-md:tw-text-3xl"
                    >
                        About us
                    </h2>
                    <div
                        class="tw-mt-6 tw-max-w-[400px] tw-text-justify max-md:tw-text-sm"
                    >
                        Supreme Car Wash offers premium car cleaning services,
                        providing meticulous attention to detail to ensure your
                        vehicle shines like new. Our experienced team uses
                        top-quality products and advanced techniques to deliver
                        superior results. Visit us today for a professional car
                        wash experience that leaves your vehicle looking
                        pristine inside and out.
                    </div>
                    <a
                        href="https://maps.app.goo.gl/"
                        class="btn tw-mt-5 tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-2 max-md:tw-mx-auto"
                    >
                        <span>View on map</span>
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-min-h-[60vh] tw-w-full tw-flex-col tw-place-items-center tw-gap-[10%] tw-bg-[#EFEFEF] tw-p-8 tw-px-[20%] max-md:tw-h-max max-md:tw-min-h-[unset] max-md:tw-gap-[4%] max-md:tw-px-[5%]"
        >
            <h2 class="tw-text-2xl tw-text-secondary max-md:tw-text-lg">
                Our services
            </h2>
            <h2
                class="tw-text-center tw-text-5xl tw-text-primary max-md:tw-text-3xl"
            >
                Premium washing service
            </h2>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-justify-around tw-gap-[10%] max-md:tw-mt-8"
            >
                <div
                    class="tw-flex tw-h-[350px] tw-w-[200px] tw-flex-col tw-place-content-center tw-place-items-center tw-gap-4 tw-text-center max-md:tw-h-[150px] max-md:tw-w-[150px]"
                >
                    <div class="tw-h-[150px] tw-w-full max-md:tw-h-[100px]">
                        <img
                            src="./assets/images/icons/car-wash.svg"
                            alt="car wash"
                            class="tw-h-full tw-w-full tw-object-contain"
                        />
                    </div>
                    <div
                        class="primary-text-color tw-text-2xl max-md:tw-text-lg"
                    >
                        Exterior washing
                    </div>
                </div>

                <div
                    class="tw-flex tw-h-[350px] tw-w-[200px] tw-flex-col tw-place-content-center tw-place-items-center tw-gap-4 tw-text-center max-md:tw-h-[150px] max-md:tw-w-[150px]"
                >
                    <div class="tw-h-[150px] tw-w-full max-md:tw-h-[100px]">
                        <img
                            src="./assets/images/icons/seat-cleaning.svg"
                            alt="car wash"
                            class="tw-h-full tw-w-full tw-object-contain"
                        />
                    </div>
                    <div
                        class="primary-text-color tw-text-2xl max-md:tw-text-lg"
                    >
                        Seat cleaning
                    </div>
                </div>

                <div
                    class="tw-flex tw-h-[350px] tw-w-[200px] tw-flex-col tw-place-content-center tw-place-items-center tw-gap-4 tw-text-center max-md:tw-h-[150px] max-md:tw-w-[150px]"
                >
                    <div class="tw-h-[100px] tw-w-full">
                        <img
                            src="./assets/images/icons/vaccuming.svg"
                            alt="car wash"
                            class="tw-h-full tw-w-full tw-object-contain"
                        />
                    </div>
                    <div
                        class="primary-text-color tw-text-2xl max-md:tw-text-lg"
                    >
                        Vacuuming
                    </div>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-bg-[#fff] tw-p-[5%] max-md:tw-px-[5%]"
        >
            <h3 class="tw-text-2xl tw-font-semibold tw-text-secondary">
                Washing plans
            </h3>
            <h3 class="primary-text-color tw-text-4xl tw-font-semibold">
                Choose your plan
            </h3>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-place-items-center tw-gap-4 max-md:tw-flex-col"
            >
                <div
                    class="tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-place-items-center tw-gap-3 tw-rounded-lg tw-bg-white tw-p-4"
                >
                    <h2 class="primary-text-color tw-text-3xl">
                        Basic cleaning
                    </h2>
                    <h3 class="tw-text-5xl tw-font-semibold tw-text-blue-950">
                        $14
                    </h3>
                    <ul class="tw-mt-2 tw-flex tw-flex-col tw-gap-2 tw-text-lg">
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Seat Washing</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Vacuum Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Exterior Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-x-circle"></i>
                            <span>Interior Wet Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-x-circle"></i>
                            <span>Window Wiping</span>
                        </li>
                    </ul>
                    <a
                        href=""
                        class="btn tw-mt-auto tw-p-2 tw-transition-transform tw-duration-[0.3s] hover:tw-scale-[1.02]"
                    >
                        Book now
                    </a>
                </div>

                <div
                    class="tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-place-items-center tw-gap-3 tw-rounded-lg tw-border-2 tw-bg-white tw-p-4 tw-shadow-2xl"
                >
                    <h2 class="primary-text-color tw-text-3xl">
                        Executive cleaning
                    </h2>
                    <h3 class="tw-text-5xl tw-font-semibold">$25</h3>
                    <ul class="tw-mt-2 tw-flex tw-flex-col tw-gap-2 tw-text-lg">
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Seat Washing</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Vacuum Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Exterior Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Interior Wet Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-x-circle"></i>
                            <span>Window Wiping</span>
                        </li>
                    </ul>
                    <a
                        href=""
                        class="btn tw-mt-auto tw-p-2 tw-transition-transform tw-duration-[0.3s] hover:tw-scale-[1.02]"
                    >
                        Book now
                    </a>
                </div>

                <div
                    class="tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-place-items-center tw-gap-3 tw-rounded-lg tw-bg-white tw-p-4"
                >
                    <h2 class="primary-text-color tw-text-3xl">
                        Presidential cleaning
                    </h2>
                    <h3 class="tw-text-5xl tw-font-semibold tw-text-blue-950">
                        $35
                    </h3>
                    <ul class="tw-mt-2 tw-flex tw-flex-col tw-gap-2 tw-text-lg">
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Seat Washing</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Vacuum Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Exterior Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Interior Wet Cleaning</span>
                        </li>
                        <li class="tw-flex tw-gap-2">
                            <i class="bi bi-check-circle tw-text-green-500"></i>
                            <span>Window Wiping</span>
                        </li>
                    </ul>
                    <a
                        href=""
                        class="btn tw-mt-auto tw-p-2 tw-transition-transform tw-duration-[0.3s] hover:tw-scale-[1.02]"
                    >
                        Book now
                    </a>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-place-content-center tw-place-items-center tw-gap-[10%] tw-overflow-hidden tw-bg-[#EFEFEF] tw-p-4 tw-px-[10%] max-md:tw-flex-col"
            id="booking"
        >
            <div
                class="tw-flex tw-h-[350px] tw-w-[350px] tw-overflow-hidden tw-rounded-md max-md:tw-hidden"
            >
                <img
                    src="./assets/images/homepage/car-washing.jpg"
                    alt="car wash"
                    class="tw-w-full tw-object-cover"
                />
            </div>
            <div class="tw-mt-[5%] tw-flex tw-h-full tw-flex-col tw-gap-[5%]">
                <div class="tw-flex tw-flex-col tw-gap-2">
                    <h2
                        class="primary-text-color tw-text-5xl tw-font-medium max-md:tw-text-3xl"
                    >
                        Request car wash
                    </h2>
                </div>
                <form
                    class="tw-mt-4 tw-flex tw-max-w-[350px] tw-flex-col tw-gap-3"
                >
                    <div class="tw-flex tw-flex-col tw-gap-4">
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Name</div>
                            <input
                                type="text"
                                class="input"
                                maxlength="10"
                                required
                                placeholder="name"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Phone</div>
                            <input
                                type="text"
                                class="input"
                                required
                                placeholder="phone"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Email</div>
                            <input
                                type="email"
                                class="input"
                                required
                                placeholder="email"
                                id="email"
                            />
                        </div>
                    </div>

                    <div class="tw-flex tw-gap-4">
                        <div class="tw-flex tw-w-full tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Time</div>
                            <select
                                name="timings"
                                id="timings"
                                class="input"
                            ></select>
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Date</div>
                            <input
                                type="date"
                                class="input"
                                required
                                placeholder="date"
                                id="date"
                            />
                        </div>
                    </div>

                    <div class="tw-flex tw-w-full tw-flex-col tw-gap-2">
                        <div class="tw-text-gray-500">Inquiry</div>
                        <textarea
                            class="input tw-max-h-[250px] tw-min-h-[40px] tw-w-full tw-resize-y"
                        ></textarea>
                    </div>

                    <button
                        href="#"
                        class="btn tw-ml-auto tw-mt-5 tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-2"
                    >
                        <span>Request</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </form>
                <div
                    class="tw-mt-4 tw-flex tw-flex-col tw-gap-2 tw-text-center"
                >
                    <h3 class="tw-text-xl">To book call</h3>

                    <div class="primary-text-color tw-text-3xl">
                        +1 122-122-122
                    </div>
                </div>
            </div>
        </section>

        <section
            class="tw-mt-5 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[5%]"
        >
            <h3
                class="primary-text-color tw-text-3xl tw-font-medium max-md:tw-text-2xl"
            >
                What some of our clients say
            </h3>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[5%]"
            >
                <div class="review-container tw-flex tw-flex-col">
                    <div class="tw-flex tw-h-[150px] tw-max-w-[550px]">
                        <!-- testimonials -->
                        <div class="slides fade tw-text-justify tw-text-lg">
                            <q class="tw-italic tw-text-gray-600">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Architecto sapiente laudantium
                                id ratione! Fugiat nulla ut, possimus facere sit
                                natus.
                            </q>
                            <div class="tw-mt-2 tw-text-yellow-400">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                            </div>
                            <p class="tw-mt-3">- Sandra Brooks</p>
                        </div>

                        <div class="slides fade tw-text-justify tw-text-lg">
                            <q class="tw-italic tw-text-gray-600">
                                Lorem ipsum dolor sit amet consectetur,
                                adipisicing elit. Laudantium tempora
                                reprehenderit illo accusamus minus sunt.
                            </q>
                            <div class="tw-mt-2 tw-text-yellow-400">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                            </div>
                            <p class="tw-mt-3">- Joshua Simmons</p>
                        </div>

                        <div class="slides fade tw-text-justify tw-text-lg">
                            <q class="tw-italic tw-text-gray-600">
                                Lorem ipsum dolor sit amet consectetur,
                                adipisicing elit. Cupiditate quaerat quia aut
                                eveniet ipsa quae consectetur placeat debitis
                                doloribus animi.
                            </q>
                            <div class="tw-mt-2 tw-text-yellow-400">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                            </div>
                            <p class="tw-mt-3">- Roger Neely</p>
                        </div>
                    </div>

                    <!-- Navigation dots -->
                    <div class="dots-container tw-mt-auto">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </div>
                </div>
            </div>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-5"
            >
                <h2 class="primary-text-color tw-text-3xl">On the map</h2>
                <iframe
                    src="https://www.google.com/maps/embed?"
                    class="tw-h-[350px] tw-w-[600px] max-md:tw-w-full"
                    style="border: 0"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                ></iframe>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-bg-[#EFEFEF] tw-p-[5%] tw-px-[10%]"
        >
            <div
                class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-3"
            >
                <h2 class="primary-text-color tw-text-3xl max-md:tw-text-xl">
                    Special Newsletter signup
                </h2>
                <h2 class="tw-text-xl max-md:tw-text-lg">
                    Get offers and updates
                </h2>

                <div
                    class="input tw-flex tw-h-[50px] tw-place-items-center tw-overflow-hidden !tw-rounded-full tw-bg-white tw-p-2"
                >
                    <input
                        type="email"
                        class="tw-h-full tw-w-full tw-px-3 tw-outline-none"
                        placeholder="email"
                    />
                    <button
                        class="btn tw-h-[35px] tw-transition-colors tw-duration-[0.3s] hover:tw-bg-blue-900"
                    >
                        Signup
                    </button>
                </div>
            </div>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-3"
            >
                <h2 class="primary-text-color tw-text-3xl max-md:tw-text-xl">
                    Like us?
                </h2>
                <h2 class="tw-text-xl max-md:tw-text-lg">Tell us more</h2>

                <div class="tw-flex">
                    <div class="stars" data-rating="0">
                        <span class="star" data-value="1">&#9733;</span>
                        <span class="star" data-value="2">&#9733;</span>
                        <span class="star" data-value="3">&#9733;</span>
                        <span class="star" data-value="4">&#9733;</span>
                        <span class="star" data-value="5">&#9733;</span>
                    </div>
                </div>
            </div>
        </section>

        <div
            class="tw-fixed tw-left-[50%] tw-top-[50%] tw-z-40 tw-flex tw-hidden tw-max-h-[450px] tw-w-[450px] tw-translate-x-[-50%] tw-translate-y-[-50%] tw-flex-col tw-rounded-md tw-bg-white tw-p-3 tw-shadow-2xl max-md:tw-w-[350px]"
            id="modal"
        >
            <div class="tw-relative tw-h-[40px] tw-w-full">
                <button
                    class="bi bi-x tw-absolute tw-right-2 tw-text-4xl"
                    id="modal-close"
                ></button>
            </div>
            <h2
                class="tw-mt-[5%] tw-text-center tw-text-2xl"
                id="modal-title"
            ></h2>

            <div
                class="tw-mt-2 tw-text-base tw-font-normal"
                id="modal-description"
            ></div>

            <textarea
                id="modal-input"
                placeholder="write..."
                maxlength="2000"
                class="input tw-mt-2 tw-hidden tw-max-h-[150px] tw-min-h-[50px] tw-w-full tw-resize-y tw-text-base tw-font-normal"
            ></textarea>

            <div class="tw-mt-3 tw-flex tw-w-full tw-place-content-center">
                <a
                    href="#"
                    class="btn tw-cursor-pointer tw-text-sm"
                    id="modal-action-btn"
                >
                    Open
                </a>
            </div>
        </div>

        <footer
            class="tw-flex tw-w-full tw-place-content-around tw-gap-3 tw-bg-primary tw-p-[5%] tw-px-[10%] tw-text-white max-md:tw-flex-col"
        >
            <div
                class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-place-items-center tw-gap-6 max-md:tw-w-full"
            >
                <img src="./assets/logo.png" alt="logo" class="tw-w-[150px]" />
                <div>
                    12111 Cypress,
                    <br />
                    TX,
                    <br />
                    United States
                </div>
                <div class="tw-mt-3 tw-text-lg tw-font-semibold">Follow us</div>
                <div class="tw-flex tw-gap-4 tw-text-2xl">
                    <a href="" aria-label="Facebook">
                        <i class="bi bi-facebook"></i>
                    </a>
                    <a
                        href="https://twitter.com/pauls_freeman"
                        aria-label="Twitter"
                    >
                        <i class="bi bi-twitter"></i>
                    </a>
                </div>
            </div>

            <div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
                <h2 class="tw-text-3xl max-md:tw-text-xl">Services</h2>
                <div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                    <a href="" class="footer-link">Car wash</a>
                    <a href="" class="footer-link">Interior cleaning</a>
                    <a href="" class="footer-link">Window wiping</a>
                    <a href="" class="footer-link">Oil change</a>
                </div>
            </div>
            <div class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4">
                <h2 class="tw-text-3xl max-md:tw-text-xl">Resources</h2>
                <div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                    <a href="" class="footer-link">About us</a>
                    <a href="" class="footer-link">FAQ</a>
                    <a href="" class="footer-link">Contact Us</a>
                    <a href="" class="footer-link">Locations</a>
                    <a href="" class="footer-link">Privacy policy</a>
                </div>
            </div>
        </footer>
    </body>

    <script src="./scripts/utils.js"></script>
    <script src="index.js"></script>
</html>
